<template>
    <div style="background-color: lightyellow;height: 100vh">
        <el-container>
            <el-header>
                <div style="width:400px">
                    <img src="@/assets/img/ji_tui_cai.png" style="float: left;"/>

                    <p style="float: left;font-size: 25px; font-weight: bold">
                        咪咪网盘
                    </p>
                </div>

            </el-header>
            <el-main>
                <div style="width: 100%;height: 50%;background-color: lightsalmon;position: absolute;padding: 0;left: 0;overflow: hidden;display: block">
                  <span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span> <span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">😸</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span><span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>
                  <span class="cat-block">a</span>

                </div>
                <el-card class="login_card">
                    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="80px">
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="form.username" placeholder="请输入账号"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit()">登录</el-button>
                            <el-button type="primary" @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
            <el-footer>
                <p>Copyright © 2023-2024
                    <el-tag>咪咪网盘</el-tag>
                </p>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import userApi from "../api/user";
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {ElMessage} from "element-plus";
import router from "../router/index";
import {codeOk} from "@/utils/http/base.js";
import {useBaseStore} from "../../store/index.js";

const baseStore = useBaseStore()
const {proxy} = getCurrentInstance();
const form = reactive({
    username: "",
    password: "",
});
const ruleFormRef = ref();
const rules = reactive({
    username: [{required: true, message: "账号不能为空", trigger: "blur"}],
    password: [{required: true, message: "密码不能为空", trigger: "blur"}],
});
const onSubmit = () => {
    if (!ruleFormRef) return;
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await userApi.login(form);
            if (res.data) {
                if (res.data.code === codeOk) {
                    baseStore.updateToken(res.data.data.token)
                    proxy.$commonJs.changeView('/home');
                    router.push("/home");
                } else {
                    ElMessage.error(res.data.message);
                }
            } else {
                ElMessage.error("服务器内部错误");
            }
        } else {
            return false;
        }
    });
};
const resetForm = () => {
    if (!ruleFormRef) return;
    ruleFormRef.value.resetFields();
};
onMounted(()=>{
  // 12
  let cats = ['🐈️','😸','🐱','😻','😽','😾','😼','🙀','😿','😹','🐈‍⬛','🐾']
  let colors = ['lightseagreen','snow','lightsalmon','lightgoldenrodyellow','lightcoral','lightyellow','lightpink','lightgrey','lightskyblue','orange','mediumspringgreen','purple']
  let catsBlock = document.getElementsByClassName('cat-block')
  let i=0
  let k=0
  setInterval(()=>{
    for (i=0;i<catsBlock.length;i++){
      catsBlock[i].style.backgroundColor = colors[(k+i)%12]
      catsBlock[i].innerText = cats[(i+k)%12]
    }
    k++
    if (k>catsBlock.length){
      k = 0
    }
  },700)
})

</script>

<style scoped>
.cat-block{
  background-color: snow;
  width: 60px;
  height: 60px;
  display: inline-block;
  position: relative;
  margin-left: 3px;
  margin-top: 1px;
  font: 700 40px Arial, sans-serif;
  overflow: hidden;
}
.el-container {
    height: 800px;
}

.el-header {
    height: 10%;
}

.el-main {
    //height: 80%;
    //background-image: url("../assets/img/bg.jpg");
    //background-repeat: no-repeat;
    //background-size: 100% 120%;
    //background-position-y: bottom;
}

.login_card {
    margin: 100px 200px;
    width: 20%;
    min-width: 300px;
    height: 200px;
    border-radius: 10px;
    background-color: rgba(245,222,179,0.9);
    position: relative;
}

.el-footer {
    height: 10%;
    text-align: center;
}
</style>
